<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

<script>
  console.log('VueRuntimeDOM:',VueRuntimeDOM)

  const {createApp,h,reactive,ref} = VueRuntimeDOM;

  const App = {
    props:{
      name:String
    },
    setup(props,context){
      let flag = ref(true);

      setTimeout(()=>{
        flag.value = false
      },2000)

      return (proxy)=>{
        return flag.value ?
          /** case1：头和头比 */
          /*h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
          ])
          : h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c')
          ]);*/

          /** case2：尾和尾比 */
          /*h('div', {style: {color: 'red'}}, [
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c')
          ])
          : h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c')
          ]);*/

          /** case3.1: */
          /*h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c')
          ])
          : h('div', {style: {color: 'red'}}, [
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c')
          ]);*/

          /** case3.2: */
          /*h('div', {style: {color: 'red'}}, [
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c'}, 'c'),
            h('li', {key: 'd'}, 'd')
          ])
          : h('div', {style: {color: 'red'}}, [
              h('li', {key: 'b'}, 'b'),
              h('li', {key: 'c'}, 'c')
            ]);*/


          /** case4 乱序*/
          h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'c',style:{color:'orange'}}, 'c'),
            h('li', {key: 'd'}, 'd'),
            h('li', {key: 'e'}, 'e'),
            h('li', {key: 'q',style:{color:'yellowgreen'}}, 'q'),
            h('li', {key: 'f'}, 'f'),
            h('li', {key: 'g'}, 'g')
          ])
          : h('div', {style: {color: 'red'}}, [
            h('li', {key: 'a'}, 'a'),
            h('li', {key: 'b'}, 'b'),
            h('li', {key: 'e'}, 'e'),
            h('li', {key: 'c',style:{color:'lightblue'}}, 'c'),
            h('li', {key: 'd'}, 'd'),
            h('li', {key: 'h'}, 'h'),
            h('li', {key: 'f'}, 'f'),
            h('li', {key: 'g'}, 'g')
          ]);
      }
    }

  }

  const app = createApp(App, {name:'ahhh',age:123})
  const p = app.mount('#app')
  console.log('p:',p);
</script>
</body>
</html>
